<template>
	<view class="u-content">
		<view class="list" v-for="(item,index) in topList" :key="item.materialCode">
			<view class="title">
				{{item.materialName}}
			</view>
			<view class="condition">
				<view class="box1">
					<view class="one">
						来源渠道: <text class="text"> {{item.original}}</text>
					</view>
					<view class="two">
						原件(份): <text class="text"> {{item.origin}}</text>
					</view>
				</view>
				<view class="box1">
					<view class="one">
						复印件(份): <text class="text"> {{item.copy}}</text>
					</view>
					<view class="two">
						是否必备材料: <text class="text"> {{item.must}}</text>
					</view>
				</view>
				<view class="box">
					是否需要电子材料:<text class="text"> {{item.isElectronic}}</text>
				</view>
				<view class="box">
					形式要求 :<text class="text"> {{item.acceptStandard}}</text>
				</view>
				<view class="box">
					形式附件:<text v-if="item.sampleUrl==''" class="text1">无</text>
					<text style="margin-right: 10rpx;color: rgb(41, 121, 255);text-decoration: underline" v-else v-for="(item1,index1) in item.sampleUrl.split(',')" :key='index1' @click="read(item1)">示例文本</text>
				</view>
			</view>
		</view>
		<view class="list2" >
			<view class="title2">
				<text>申请材料标准</text>
			</view>
			<view class="wenben">
				<view>1、由申请人编写的文件A4规格纸张打印；</view>
				<view>2、申请表中各项内容填写清晰、明了，与实际情况一致；</view>
				<view>3、申请材料的复印件应清晰。</view>
			</view>
			<view class="title2">
				<text>审查要点</text>
			</view>
			<view class="wenben">
				<view>1、逐项提交各项资料；</view>
				<view>2、应按照申请表填表说明的要求填写申请表各项内容。</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				topList:[],
				itemCode:'',
			    // list:[]
			}
		},
		onLoad(option){
			this.itemCode = option.itemCode;
			this.selectItemDetail();
		},
		methods:{
			read(url){
				uni.navigateTo({
					url: '/pages/index/webView?src=' + encodeURIComponent(url)
				})
			},
			selectItemDetail(){
				uni.showLoading({
					title: '搜索中...',
					mask: true
				});
				this.$ajax({
					url: '/api/wwwBiz/selectItemDetail',
					method: 'POST',
					data:{
						itemCode:this.itemCode
					}
				}).then(res =>{
					if (res.code == 200) {
							this.topList = res.data.data3;

						}
					}).finally(()=>{
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-content{
		width: 100%;
		height: 100%;
		.list{
			margin: 40rpx 50rpx;
			display: flex;
			flex-direction: column;
			border-bottom: 1rpx solid #f1f1f1;
			.title{
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
			.condition{
				.box1{
					margin: 20rpx 0;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #999999;
					display: flex;
					.one{
						flex:3;
					}
					.two{
						flex: 2;
					}
					.text{ 
						font-size: 28rpx;
						color: #333333;
						margin-left: 20rpx;
					}
				}
				.box{
					margin: 20rpx 0;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #999999;
					text{
						font-size: 28rpx;
						color: #333333;
						margin-left: 20rpx;
					}
					.text1{
						font-size: 28rpx;
						color: #333333;
						margin-left: 20rpx;
					}
					.text2{
						font-size: 28rpx;
						color: #5b96ff;
						margin-left: 20rpx;
					}
				}
			}
		}
		.list2{
			margin: 40rpx 50rpx;
			display: flex;
			flex-direction: column;
			border-bottom: 1rpx solid #f1f1f1;
			.title2{
				font-size: 36rpx;
				line-height: 44rpx;
				color: #333333;
				text::before{
						content: '';
						width: 6rpx;
						height: 36rpx;
						display: inline-block;
						background-color: #007AFF;
						margin-right: 26rpx;
						margin-top: 6rpx;
						border-radius: 2rpx;
					}
			}
			.wenben{
					font-size: 28rpx;
					line-height: 54rpx;
					color: #333333;
					margin: 20rpx 0;
			}
		}
	}
</style>
